<template>
  <view class="myPoint">

    <view class="header">
      <view class="point">当前积分：
        <text v-if="points==-1">...</text>
        <u-count-to v-else start-val="0" :end-val="points" separator="," color="#fff" font-size="18" />
      </view>
      <view class="desc" @tap="toDesc">积分说明>></view>
    </view>

    <u-tabs :list="tabList" line-width="0" item-style="height: 44px;width: 100%;" scrollable="false" :active-style="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}" :inactive-style="{color: '#606266',transform: 'scale(1)'}" @click="switchTab" />

    <view class="table">
      <u-row align="center" gutter="10" custom-style="margin-bottom: 10px">
        <u-col text-align="center" span="3">
          <view class="text">商品信息</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text">总金额</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text">总积分</view>
        </u-col>
        <u-col text-align="center" span="3">
          <view class="text">兑换时间</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text">状态</view>
        </u-col>
      </u-row>
      <u-row v-for="(item, index) in tableData" :key="index" class="table row" gutter="10">
        <u-col text-align="center" span="3">
          <view class="text2">{{ item.pointsProductName }}</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text2">{{ item.redeemTotalMoney }}</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text2">{{ item.redeemTotalPoints }}</view>
        </u-col>
        <u-col text-align="center" span="3">
          <view class="text2">{{ item.redeemDateTime }}</view>
        </u-col>
        <u-col text-align="center" span="2">
          <view class="text2">{{ item.redeemStatusName }}</view>
        </u-col>
      </u-row>
    </view>

    <!-- 无商品显示 -->
    <view v-if="loadMoreStatus!='loading' && tableData.length===0" class="empty">
      <view class="img">
        <image src="https://mm.wentsoft.com/images/empty-img/not-found.png" />
      </view>
      <view class="text">没有找到数据</view>
    </view>

    <!-- 没有更多 -->
    <u-loadmore :status="loadMoreStatus" color="#999" margin-top="40" height="20" line-color="#999" dashed @loadmore="loadMore" />

  </view>
</template>

<script>
import { pointsProductRedeemLogPage, userPointsBalancePointsBalance } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      points: -1,
      tabList: [], // tab分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      totalPage: 0, // 总页数
      tableData: [], // 表单数据
      loadMoreStatus: 'loadmore',
      loading: false
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    },
    searchTableQuery() {
      return {
        size: 10,
        current: 1,
        cardNo: this.userInfo.cardNo
      }
    }
  },

  onLoad() {
    // 如果没有mall信息->去登陆页面
    if (!this.hasLoginAndHasMallInfo) {
      return uni.$u.route('/pages/users/login/index')
    }
    // 查询积分
    this.getPoint()
    // 设置tab 查询tab数据
    this.getSection()
  },

  onReachBottom() {
    this.loadMore()
  },
  methods: {
    getSection() {
      this.tabList = [
        {
          name: '积分兑换商品记录'
        }
      ]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
      this.getSearchList()
    },
    getPoint() {
      const that = this
      userPointsBalancePointsBalance(
        { cardNo: this.userInfo.cardNo }
      ).then(res => {
        that.points = res.data
      })
    },
    switchTab(e) {
      if (this.currentTab === e.id) {
        return
      }
      this.currentTab = e.id
      this.init()
      this.getSearchList()
    },
    // 切换时重置数据
    init() {
      this.searchTableQuery.current = 1
      this.totalPage = 0
      this.tableData = []
      this.loadMoreStatus = 'loadmore'
    },
    loadMore() {
      if (this.searchTableQuery.current < this.totalPage) {
        this.searchTableQuery.current = this.searchTableQuery.current + 1
        this.getSearchList()
      } else {
        this.loadMoreStatus = 'nomore'
      }
    },
    getSearchList() {
      const that = this
      that.loadMoreStatus = 'loading'
      that.loading = true
      if (that.currentTab === 1) {
        pointsProductRedeemLogPage(
          that.searchTableQuery
        ).then(res => {
          that.loading = false
          that.loadMoreStatus = 'loadmore'
          that.handle('积分兑换商品记录', res)
        })
      }
    },
    handle(desc, res) {
      this.totalPage = res.data.pages
      console.info(desc + '列表数据：', res.data.records)
      this.tableData = this.tableData.concat(res.data.records)
      if (res.data.current === res.data.pages) {
        this.loadMoreStatus = 'nomore'
      }
    },
    toDesc() {
      // uni.$u.route('')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  @include flex-space-between;
  /* 渐变背景黑 */
  height: 120rpx;
  border-radius: 10rpx;
  background-color: #d8d8d8;
  background: linear-gradient(294deg, #6d6d6d 0%, #000 100%);

  padding: 0 40rpx;
  font-size: 28rpx;
  color: white;
}

.table {
  background-color: #f0f0f0;
  .text {
    height: 53rpx;
    line-height: 53rpx;
    font-size: 26rpx;
    font-weight: bold;
  }
  .text2 {
    height: 106rpx;
    line-height: 53rpx;
    font-size: 26rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}
</style>
